<template>
  <div class="command-dispatch-main">
    <div class="div-head">
      <HeadMenu :activePage="activePanel"/>
    </div>

    <!-- 地图   -->
    <div class="main-content">
      <div class="left-content"></div>
      <div class="right-content">
        <Mapframe ref="mapframe"
                  :showMenuTools="showMenuTools"
                  @mapInfoEvent="getMapInfo"
                  @locateEvent="getLocate"
                  @popupBtnClick="popupBtnClick"
                  :device-data="MapframeData"></Mapframe>
      </div>
    </div>

    <!-- 底部视频播放    -->
    <!--      <div ref="foot-div" class="foot-div" :style="footBoxStyle">
            <div class="bottom-player"  :class="footActive === true ? 'hight180' : 'hight0'">
              <div class="foot-play-frame">
                <div class="box_site5">
                  <div v-for="item in playerPanels" class="div_site5" :ref="item.ref"  :style="item.style"
                       @click="playerBoxClick(item.id)" @mouseover="boxMouseOver(item.id)" @mouseleave="boxMouseLeave(item.id)">
                    <CommPlayer :ref="item.playerRef" :scale="scale" :customStyle="playerBgStyle"></CommPlayer>
                  </div>
                </div>
              </div>
            </div>
          </div>
          &lt;!&ndash; 底部按钮   &ndash;&gt;
          <div class="foot-btn-div">
            <div class="foot-button" :class="footActive === true ? 'bottom180' : 'bottom0'" @click="footBtnClick">
              <i ><Icon type="ios-arrow-up" /></i>
            </div>
          </div>-->

    <!--      &lt;!&ndash;  右边抽屉  &ndash;&gt;
          <div ref="rightDiv" class="right-div" :style="rightBoxStyle">
            &lt;!&ndash;      <div class="right_drawer" :class="rightActive === true ? 'width453' : 'width0'">&ndash;&gt;
            <div class="right_drawer" >
              &lt;!&ndash;        <Poptip title="气泡" trigger="hover" placement="right">
                        <span> 气泡 </span>
                      <template #content>
                          <div class="api">
                              <table>
                                  <thead>
                                      <tr>
                                          <th>Version</th>
                                          <th>Update Time</th>
                                          <th>Description</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>0.9.5</td>
                                          <td>2016-10-26</td>
                                          <td>components</td>
                                      </tr>
                                      <tr>
                                          <td>0.9.4</td>
                                          <td>2016-10-25</td>
                                          <td>Add new components</td>
                                      </tr>
                                      <tr>
                                          <td>0.9.2</td>
                                          <td>2016-09-28</td>
                                          <td>Add new components</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </template>

                      </Poptip>&ndash;&gt;
            </div>
            <div class="rightbox">
              <div class="button" @click="rightBoxbtnClick">
                <i class="iconfont iconshouqi1"><Icon type="ios-arrow-forward" /></i>
              </div>
            </div>
          </div>-->

    <!-- 右下文字提示   -->
    <div class="word-tag-div" >
      <div class="sth" :style="tagBoxStyle">
        <div style="margin-bottom: 5px;">
          当前位置：{{currentLocate}}
        </div>
        <div><span>{{currentMapInfo}}</span> </div>
      </div>
    </div>
    <!--        左边抽屉  -->
    <div class="left-div" :style="leftBoxStyle">
      <div class="drawer-box" :class="leftActive === true ? 'width300' : 'width300'">
        <GbOrgDeviceTree ref="GbOrgDeviceTree"
                         @device-refresh="deviceRefresh"
                         @chn-node-click="chnClick"
                         @org-node-click="orgClick"
                         @dev-node-click="devClick"
                         @on-offline-click="chnOfflineClick"
                         @on-playbtnclick="playBtnClick"
                         @on-select-change="selectChange"></GbOrgDeviceTree>
      </div>

      <!--      <div class="left-button1" @click="leftBtnClick">-->
      <div >
        <Button type="primary"
                :Title="leftBtn.title"
                :icon="leftBtn.icon"
                style="margin-left: -2px" @click="leftBtnClick"/>
        <!--        <i><Icon type="ios-arrow-forward" /></i>-->
      </div>

      <!--        <div class="left-button-box">

            </div>-->
    </div>

    <DeviceInfo ref="deviceInfo"></DeviceInfo>
    <VideoCallDialog ref="videoCallDialog"></VideoCallDialog>

    <!--    <DevicePlayer ref="devicePlayer" ></DevicePlayer>-->
    <Modal  v-model="player.show"  :loading="player.loading" :title="player.title"
            :mask-closable="false"
            :footer-hide=false
            width="850px"
            :closable="true"
            @on-visible-change = "onModalVisibleVhange"
    >
      <!--      <Row :gutter="4">
              <Col span="24">
                <div style="width:800px; height: 500px;">
                  <CommPlayer ref="CommPlayer1" :scale="scale" :customStyle="playerBgStyle"></CommPlayer>
                </div>
              </Col>
            </Row>
            <Row :gutter="4">
              <Col span="18"/>
              <Col span="6">
                <Button type="primary" @click="playerClose">关闭</Button>
              </Col>
            </Row>-->

      <div style="width:800px; height: 500px;">
        <CommPlayer ref="CommPlayer1" :scale="scale" :customStyle="playerBgStyle"></CommPlayer>
      </div>
    </Modal>

  </div>

</template>
<script>
import Mapframe from "@/view/Home/map/Mapframe";
import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import MainFooterMenu from "@/view/Home/component/MainFooterMenu";
import Device from '@/api/Device';
import DrawerFootButton from "@/view/Home/component/DrawerFootButton";
import DrawerLeftButton from "@/view/Home/component/DrawerLeftButton";
import DrawerFoot from "@/view/Home/component/DrawerFoot";
import CommPlayer from "@/view/Home/component/CommPlayer";

import DeviceInfo from "@/view/Home/utils/DeviceInfoDialog";
import VideoCallDialog from "@/view/Home/utils/VideoCallDialog";
import HeadMenu from "@/view/Home/component/HeadMenu";
import GbDevicetree1 from "_c/topnav/GbDeviceTree1";
import GbDevicetree from "_c/topnav/GbDeviceTree";
import GbOrgDeviceTree from "_c/topnav/GbOrgDeviceTree";
import TreeTest from "_c/topnav/TreeTest";
import DevicePlayer from '@/view/Player/DevicePlayer.vue';
import {apiResult} from "@/libs/util";

export  default {

  components: {
    Mapframe,MainTopMenuPanel,MainFooterMenu,DrawerFootButton,
    DrawerLeftButton,DrawerFoot,
    GbDevicetree1,GbDevicetree,GbOrgDeviceTree,TreeTest,
    CommPlayer,DeviceInfo,VideoCallDialog,HeadMenu,DevicePlayer},
  computed:{
    drawerFootDisplay(){
      return this.drawerFoot.display;
    },
    drawerFootBtnDisplay(){
      return this.drawerFoot.display;
    },
  },
  watch:{
    footActive(oldValue,newValue){
      this.footRightBoxCloseOrOpen();
    },
    rightActive(){
      this.footRightBoxCloseOrOpen();
    }
  },
  data(){
    return{
      leftBtn:{
        state: 1, //0关闭 1展开
        icon:"ios-arrow-back",
        title: "关闭"
      },

      player:{
        show:false,
        title:"",
        loading:false
      },
      showMenuTools:true,//地图是否显示菜单栏
      playerActive: 'border:1px solid #F00', //播放器选中时的边框
      playerUnActive: 'border:1px solid #14edc5', //播放器没选中时的边框
      currentPlayerBoxNum: -1,//当前选中播放器的序号

      playerBgStyle:{ //播放器背景颜色
        backgroundColor: 'rgb(175,175,176)'
      },
      scale:false,
      activePanel:0,
      leftBoxStyle:{bottom: '0px',left:"0px"},
      footBoxStyle:{
        left:"300px",
        bottom:"0px"
      },
      leftActive:false,

      rightBoxStyle:{bottom: '180px',right:'-400px'},
      tagBoxStyle:{right:'0px',bottom: '10px'},

      rightActive:false,
      footActive:false,

      drawerHeight:'60%',
      drawerWidth:'300px',

      api: new Device(),
      devDatas:[],
      MapframeData:null,
      //mapInfo:null,
      currentMapInfo:"《ArcGis 影像》，级别：11",
      currentLocate:"112.34353, 22.343553",

      drawerFoot:{
        drawerHeight:'180px',
        drawerWidth:'600px',
        drawerRight:'0',
        inner:false,
        display: false,
        mask: true,
      },
      playerPanels:[ //播放面板
        {id:0,ref:'playerBox1',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer1",active:false},
        {id:1,ref:'playerBox2',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer2",active:false},
        {id:2,ref:'playerBox3',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer3",active:false},
        {id:3,ref:'playerBox4',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer4",active:false},
        {id:4,ref:'playerBox5',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer5",active:false},
      ],
      playerScale:false
    }
  },
  methods:{
    /**
     * 地图改变后
     */
    getMapInfo(event){
      this.currentMapInfo=event;
    },
    /**
     * 取当前定位信息
     */
    getLocate(event){
      this.currentLocate=event;
    },

    /**
     * 当底部栏和右边栏关闭或打开时
     */
    footRightBoxCloseOrOpen(){
      if (this.rightActive){
        this.rightBoxStyle.right = '0px';
        this.tagBoxStyle.right="400px";
      }else{
        this.rightBoxStyle.right = '-400px';
        this.tagBoxStyle.right="400px";
      }

      if (this.footActive == false ){
        //this.tagBoxStyle.bottom="0px";
        this.rightBoxStyle.bottom='0px';
      }else {
        //this.tagBoxStyle.bottom = "180px";
        this.rightBoxStyle.bottom='180px';
      }
    },
    rightBoxbtnClick(e){
      this.rightActive=!this.rightActive;
      /*if (this.rightActive){
        this.tagBoxStyle.right="500px";
      }else{
        this.tagBoxStyle.right="50px";
      }*/
    },
    footBtnClick(){
      this.footActive = !this.footActive;
      if (this.footActive){
        this.rightBoxStyle.bottom='180px';
        this.tagBoxStyle.bottom='10px';
        //this.leftBoxStyle.bottom='180px';

      }else {
        this.rightBoxStyle.bottom='0';
        this.tagBoxStyle.bottom='10px';
        //this.leftBoxStyle.bottom='0';

      }
    },

    playerPanelClick(id){

    },
    playerPanelMouseOver(id){

    },
    playerPanelMouseLeave(id){

    },

    drawerFootBtnClick(show){
      console.log("show: %o",show);
      /** 底部抽屉按钮点击 */
      this.drawerFoot.display = show;
      if (show){
        this.rightBoxStyle.bottom='180px';
        this.tagBoxStyle.bottom='10px';
      }else {
        this.rightBoxStyle.bottom='0';
        this.tagBoxStyle.bottom='10px';
      }

    },

    leftBtnClick(){
      if (this.leftBtn.state == 1){
        //当前展开状态
        this.leftBtn.state = 0;
        this.leftBtn.icon = "ios-arrow-forward"
        this.leftBtn.title = "展开"

        this.leftActive =false;
        this.mapToolLeft = "0px";
        this.leftBoxStyle.left = "-300px";

        this.footBoxStyle.left="0px";
      }else{
        //当前关闭状态
        this.leftBtn.state = 1;
        this.leftBtn.icon = "ios-arrow-back"
        this.leftBtn.title = "收起"
        this.leftActive = true;
        this.mapToolLeft = "300px";
        this.leftBoxStyle.left = "0px";

        this.footBoxStyle.left="300px";
      }
    },

    orgClick(node, data){
      console.log("orgClick-node:%o",node);
      console.log("orgClick-data:%o",data);
    },
    devClick(node, data){

    },


    onModalVisibleVhange(state){
      console.log(">>>>>>>>>>>>>CommandDispatch.onModalVisibleVhange: state = %o",state);
      if (!state){
        this.$refs.CommPlayer1.stop();
      }
    },
    playerClose(){
      this.player.show=false;
    },
    /**
     *  播放实时视频
     * @param node
     * @param data
     */
    playStart(node, data){
      if (!this.footActive){
        this.footActive = true;
      }
      const that = this;
      //在线设备
      const deviceId=data.arrt.deviceCode;
      const channelId=data.arrt.channelCode;
      console.log("通知设备推流：" + deviceId + " : " + channelId);
      if (!(!!deviceId && !!channelId)){
        this.$Message.error("数据属性缺失，不能播放");
      }
      this.playerScale =true;

      /** 通知设备推流 */
      this.api.playStart(deviceId,channelId).then(res=>{
          apiResult(res.data,false,result=>{
            this.player.show=true;
            this.$refs.CommPlayer1.play(result.data.ws_flv);
          })

      })
    },
    chnOfflineClick(node, data){

    },
    playBtnClick(node, data){

    },
    selectChange(node, data){

    },
    /**
     * 当在设备树搜索和选择时
     * 设备数据刷新
     * @param data
     */
    deviceRefresh(data){
      //刷新汇聚数据
      this.MapframeData=[];
      console.log(">>>>>>>>>>> CommandDispatch.deviceRefresh(): data=%o",data);

      //递归执行处理数据
      this.recursiveDevices(data);

      console.log(">>>>>>>>>>> CommandDispatch.deviceRefresh(): MapframeData=%o",this.MapframeData);
      this.$refs.mapframe.refreshCluser(40,20,this.MapframeData)

      this.$refs.mapframe.showPointer(this.MapframeData);
    },

    recursiveDevices(data,org){
      if (!org){
        org = {};
        org.orgName=null;
        org.devName=null;
        org.parent="org";//org/dev
      }
      //递归设备
      for(let i=0;i<data.length;i++) {
        if (data[i].type == 'org'){
          org.orgName = data[i].title;
          org.parent = "org";
          org.devName = "";
        }
        if (data[i].type == 'dev'){
          org.devName = data[i].title;
          org.parent = "dev";
        }
        if (data[i].type == 'chn') {
          const dev = data[i];
          //console.log(">>>>>>>>>>> CommandDispatch.recursiveDevices(): longitude=%o",dev.longitude);
          if (!dev.longitude){
            console.log(">>>>>>>>>>> CommandDispatch.recursiveDevices(): longitude=%o",dev.longitude);
            //dev.longitude=this.mapInfo.center[0] + Math.random() * 0.05;
            //dev.latitude=this.mapInfo.center[1] + Math.random() * 0.05;
          }

          /*         let device={
                     id: dev.id,
                     title: dev.title,
                     longitude: !!dev.longitude?dev.longitude:this.mapInfo.center[0] + Math.random() * 0.05,
                     latitude: !!dev.latitude?dev.latitude:this.mapInfo.center[1] + Math.random() * 0.05,
                     deviceType: dev.deviceType, //普能执法仪，2、4G执法仪, 3、监控摄像头
                     online: dev.online, //1 在线，0离线

                     orgName:org.orgName,
                     devName:org.devName,
                     userName:"王警官",
                     userCode:"000002",
                     direction:"6°",
                     speed:25,
                     locate:"深圳市龙华区",
                     arrt: dev.arrt
                   };*/

          this.MapframeData.push(data[i]);
        }

        if (!!data[i].children) {
          this.recursiveDevices(data[i].children,org);
        }
      }
    },

    /**
     * 通道点击
     * @param event
     * @param node
     * @param data
     */
    chnClick(event,node, data){
      /**
       * event:
       * locate 定位
       * liveVideo 实时视频
       * liveAudio 监听
       * videoCall 视频通话
       * audioCall 语音通话
       * takePicture 拍照
       * issueMessage 消息下发
       * favorite 收藏
       * track 跟踪
       * nearby 附近
       * deviceInfo 设备信息
       */
      console.log("chnClick(event,node, data): ");
      console.log("event: %o ",event);
      console.log("node: %o ",node);
      console.log("data: %o ",data);

      if (event === 'locate'){
        //定位
        this.$refs.mapframe.locate(data);
      }else if (event === 'liveVideo'){
        //实时视频
        this.playStart(node,data);
      }else if(event === 'deviceInfo'){
        //设备信息
        this.showDeviceIfo(data);


      }else if(event === 'videoCall'){
        this.$refs.videoCallDialog.openDialog(data, null);
      }



    },
    /**
     * 播放器点击
     */
    playerBoxClick(number){
      for(let i in this.playerPanels){
        if (i == number){
          if (this.currentPlayerBoxNum==number){
            // 本来就选中的则取消
            this.playerPanels[i].active = false;
            this.playerPanels[i].style = this.playerUnActive;
            this.currentPlayerBoxNum = -1;

          }else{
            // 没选中的就选 中
            this.playerPanels[i].active = true;
            this.playerPanels[i].style = this.playerActive;
            this.currentPlayerBoxNum = number;
          }
        }else{
          // 其它box 恢复原状态
          this.playerPanels[i].active = false;
          this.playerPanels[i].style = this.playerUnActive;
        }
      }
    },
    /** BOX 移入 事件 */
    boxMouseOver(number) {
      if (!this.playerPanels[number].playerActive){
        this.playerPanels[number].style = this.playerActive;
      }
    },
    /** BOX 移出 事件 */
    boxMouseLeave(number) {
      if (this.currentPlayerBoxNum == number){
        return;
      }
      if (!this.playerPanels[number].playerActive){
        this.playerPanels[number].style = this.playerUnActive;
      }
    },

    popupBtnClick(event,node, data){
      /**
       * event:
       * locate 定位
       * liveVideo 实时视频
       * liveAudio 监听
       * videoCall 视频通话
       * audioCall 语音通话
       * takePicture 拍照
       * issueMessage 消息下发
       * favorite 收藏
       * track 跟踪
       * nearby 附近
       * deviceInfo 设备信息
       */
      console.log(">>>>> [home]-->popupBtnClick(event,node, data)");

      if (event === 'liveVideo'){
        //实时视频
        this.playStart(node,data);
      }else if(event === 'deviceInfo'){
        //设备信息
        this.showDeviceIfo(data);
      }else if(event === 'videoCall'){
        //视频通话
        this.$refs.videoCallDialog.openDialog(data, null);

      }
    },
    //设备信息
    showDeviceIfo(data){
      console.log("showDeviceIfo: 有错误，会崩溃，暂停使用 %o", data);

      //this.$refs.deviceInfo.openDialog(data, null);
    }
  },
  created() {
    ;
  },
  mounted() {
    /**
     * 设备默认的地图参数
     */
    //new MapInfo().set("Arcgis","ArcgisYX");
    this.activePanel = 1;
    //new MapInfo().set("GaoDe","GaoDeJD");
    //this.mapInfo = new MapInfo().get();
  }

}
</script>

<style lang="less" scoped>
div{
  height: 100%;
}
//Chrome 浏览器隐藏滚动条
/*
   *::-webkit-scrollbar {
     display: none;
   }
*/
</style>
<style lang="less">
@import "./Moudle/style/CommandDispatch-bright";
</style>
